<template>
	<div>
		<div style="padding: 0px 15px;display: flex">
			<el-radio-group style="padding-top: 5px;width: 30%" v-model="dataType" @change="changeDataType">
				<el-radio label="L">登录</el-radio>
				<el-radio label="B">借书</el-radio>
				<el-radio label="R">还书</el-radio>
			</el-radio-group><br/><br/>
			<div style="width: 70%;text-align: right;display: inline">
				<el-radio-group v-model="timeType" @change="timeChange">
					<el-radio label="Y">年</el-radio>
					<el-radio label="M">月</el-radio>
					<el-radio label="D">日</el-radio>
				</el-radio-group>

				<span style="font-size: 13px;font-weight: bold;margin-left: 15px">{{$t('message.start')}}</span>
				<el-date-picker v-if="timeType == 'D'" size="small" :editable="false" :clearable="false" v-model="startTime" type="date" @change="changeStartTime"></el-date-picker>
				<el-date-picker v-if="timeType == 'M'" size="small" :editable="false" :clearable="false" v-model="startTime" type="month" @change="changeStartTime"></el-date-picker>
				<el-date-picker v-if="timeType == 'Y'" size="small" :editable="false" :clearable="false" v-model="startTime" type="year" @change="changeStartTime"></el-date-picker>

				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker v-if="timeType == 'D'" size="small" v-model="endTime" @change="changeEndTime" type="date" :editable="false" :clearable="false">
				</el-date-picker>
				<el-date-picker v-if="timeType == 'M'" size="small" :editable="false" :clearable="false" v-model="endTime" type="month" @change="changeEndTime"></el-date-picker>
				<el-date-picker v-if="timeType == 'Y'" size="small" :editable="false" :clearable="false" v-model="endTime" type="year" @change="changeEndTime"></el-date-picker>
			</div>
		</div>
		<div id="echart1" style="width:100%;height: 550px;margin:auto;"></div>
	</div>
</template>
<script>
	import $ from 'jquery'
	//import echarts from 'echarts/lib/echarts'
	var echarts = require('echarts/lib/echarts');
	// 引入柱状图
	require('echarts/lib/chart/bar');
	// 引入饼状图
	require('echarts/lib/chart/pie');
	// 引入曲线图
	require('echarts/lib/chart/line');
	// 引入提示框和标题组件
	require('echarts/lib/component/tooltip');
	require('echarts/lib/component/title');
	require('echarts/lib/component/legend')

	import { GloabFun,HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	var myChart = null;
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var o = {
					"M+": this.getMonth() + 1, //month 
					"d+": this.getDate(), //day 
					"h+": this.getHours(), //hour 
					"m+": this.getMinutes(), //minute 
					"s+": this.getSeconds(), //second 
					"q+": Math.floor((this.getMonth() + 3) / 3), //quarter 
					"S": this.getMilliseconds() //millisecond 
				}
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for(var k in o) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
					}
				}
				return format;
			};
			return {
				timeType: 'D', //时间模式 年 月 日
				dataType: "L",
				titleName: '',
				xAxisData: [], //横坐标
				seriesDatas: [], //指
				legendDatas: [],
				startTime: '',
				endTime: ''
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				this.$emit('backPrev');
			},
			getLastDayOfMonth(year, month) {
				var new_year = year; //取当前的年份          
				var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）          
				if(month > 12) {
					new_month -= 12; //月份减          
					new_year++; //年份增          
				}
				var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天          
				return(new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate(); //获取当月最后一天日期          
			},
			timeChange(data) {
				switch(data) {
					case "D":
					this.getDatas();
					break;
					case "M":
					this.startTime = new Date(this.startTime).format('yyyy-MM') + '-01 00:00:00'
					this.endTime = new Date(this.endTime).format('yyyy-MM') + '-' + (this.getLastDayOfMonth(new Date(this.endTime).getFullYear(), new Date(this.endTime).getMonth() + 1)) + ' 23:59:59';
					this.getDatas();
					break;
					case "Y":
					this.startTime = new Date(this.startTime).format('yyyy') + '-01-01 00:00:00';
					this.endTime = new Date(this.endTime).format('yyyy') + '-12-31 23:59:59';
					this.getDatas();
					break;
				}
			},
			changeDataType() {
				this.getDatas();
			},
			drawBar() {
				myChart = echarts.init(document.getElementById('echart1'));
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: this.legendDatas
					},
					calculable: true,
					xAxis: [
					{
						type: 'category',
						axisTick: {show: false},
						name: '日期',
						data: this.xAxisData
					}
					],
					yAxis: {
						name: '次数'
					},
					series: this.seriesDatas
				});
			},
			changeStartTime() {
				if(this.timeType == 'M') {
					this.startTime = new Date(this.startTime).format('yyyy-MM') + '-01 00:00:00';
				} else if(this.timeType == 'Y') {
					this.startTime = new Date(this.startTime).format('yyyy') + '-01-01 00:00:00';
				}
				this.getDatas();
			},
			changeEndTime() {
				if(this.timeType == 'M') {
					this.endTime = new Date(this.endTime).format('yyyy-MM') + '-' + (this.getLastDayOfMonth(new Date(this.endTime).getFullYear(), new Date(this.endTime).getMonth() + 1)) + ' 23:59:59';
				} else if(this.timeType == 'Y') {
					this.endTime = new Date(this.endTime).format('yyyy') + '-12-31 23:59:59';
				}
				this.getDatas();
			},
			getDatas(){
				var param = {
					type: this.timeType,
					show: this.dataType,
					begin: this.startTime,
					end: this.endTime,
					sn: this.templateObj.sns,
					districtid: [],
					UserId: parseInt(GloabFun.getKeyId())
				}
				HttpServer.httpPost.call(this,'/Api/Device/GetCirculateRecord',param,function(response){},function(response){
					this.xAxisData = response.data.time;
					var that = this;
					this.legendDatas = [];
					response.data.info.forEach(function(item){
						item.type = 'bar';
						item.barGap = 0;
						that.legendDatas.push(item.name);
					})
					this.seriesDatas = response.data.info;
					this.$nextTick(function(){
						this.drawBar();
					})
				})
			},
		},
		created() {
			this.startTime = this.templateObj.startTime;
			this.endTime = this.templateObj.endTime;
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>